<template>
	<!-- 售后记录 -->
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="60%">
		<el-form :model="form" label-width="auto">
			<el-row :gutter="20" class="mb20">
				<el-col :span="12">
					<el-form-item label="商品名称">
						<el-input v-model="form.goods_title" disabled />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="售价">
						<el-input v-model="form.goods_option_price" disabled />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20" class="mb20">
				<el-col :span="12">
					<el-form-item label="成本价">
						<el-input v-model="form.cost_price" disabled />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="购买数量">
						<el-input v-model="form.num" disabled />
					</el-form-item>
				</el-col>
			</el-row>
			<!-- <el-row :gutter="20" class="mb20">
				<el-col :span="12">
					<el-form-item label="售后数量">
						<el-input v-model="form.returnNum" disabled />
					</el-form-item>
				</el-col>
			</el-row> -->
			<el-row class="mb10">
				<el-col>
					<el-form-item label="售后记录" />
				</el-col>
			</el-row>
			<el-row>
				<el-col>
					<el-table :data="logList" border style="width: 100%">
						<el-table-column label="完成时间" align="center">
							<template #default="scope">{{ timeDictionary(scope.row.create_time) }}</template>
						</el-table-column>
						<el-table-column label="描述" align="center">
							<template #default="scope">
								<span style="font-weight: bold">
									{{ afterSalesOrderDescri(1, scope.row.descri, scope.row.price) }}
									{{ Number(scope.row.refund_after_discount_amount) ? `，含优惠券金额【${scope.row.refund_after_discount_amount}】`:'' }}
								</span>
								<br />
								<!-- 卖家退回地址 -->
								<span v-if="scope.row.address && scope.row.address != ',,,,,'"> 地址：{{ scope.row.address }} </span>
								<br v-if="scope.row.address && scope.row.address != ',,,,,'" />
								<!-- 买家快递单号 -->
								<span v-if="scope.row.freight_name"> 快递公司：{{ scope.row.freight_name }} </span>
								<br v-if="scope.row.freight_name" />
								<span v-if="scope.row.freight_sn"> 快递单号：{{ scope.row.freight_sn }} </span>
								<br v-if="scope.row.freight_sn" />
								<span v-if="scope.row.remark" style="color: red"> 原因：{{ scope.row.remark }} </span>
								<br />
							</template>
						</el-table-column>
						<el-table-column label="附件" align="center">
							<template #default="scope">
								<el-image
									v-for="(item, index) in scope.row.images"
									:key="index + ''"
									:src="item"
									:preview-src-list="scope.row.images"
									:style="`width:60px;height:60px;margin-right: 10px;`"
									fit="scale-down"
									:z-index="3000"
								/>
							</template>
						</el-table-column>
					</el-table>
				</el-col>
			</el-row>
		</el-form>
	</el-dialog>
</template>

<script lang="ts">
import { reactive, toRefs } from 'vue';
import { afterOrderRecord } from '/@/api/admin1';
import { afterSalesOrderDescri, timeDictionary } from '/@/utils/dictionaryTranslation';

export default {
	name: 'afterSalesRecordDialog',
	setup() {
		const state = reactive({
			title: '退款待处理',
			open: false,
			form: {} as any,
			logList: [],
		});

		/********** 点击事件(on开头) **********/
		/********** 方法事件 **********/
		//打开
		const openDialog = (config: any) => {
			console.log(config);
			state.open = true;
			state.title = config.title;
			state.form = config.data;
			_afterOrderRecord(config.data);
		};

		/********** 网络事件 **********/
		// 售后记录
		const _afterOrderRecord = (_data: object) => {
			afterOrderRecord(_data).then((res: any) => {
				console.log('售后记录', res);
				state.logList = res.data.list.map((item: any) => {
					let images = item.images ? item.images.split(',') : [];
					return {
						...item,
						images,
					};
				});
			});
		};

		return {
			openDialog,
			timeDictionary,
			afterSalesOrderDescri,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
